// 定义懒加载插件
import { useIntersectionObserver } from '@vueuse/core'

//图片懒加载插件
export const lazyimg = {
    //定义插件的方法install
    install(app) {
        //创建全局自定义指令
        app.directive('img-lazy', {
            mounted(el, binding) {
                //el 绑定的dom元素   img
                //binding.value 指令绑定等号后面表达式的值   图片的url
                //vueUse包里面的方法来判断是否进入视口区域
             const {stop} =  useIntersectionObserver(
                    //判断是否进入视口区域的元素 
                    el,
                    //回调函数 isIntersecting 里面保存一个布尔值
                    //true时进入视口区域
                    ([{ isIntersecting }]) => {
                        if (isIntersecting) {
                            //图片进入视口区域1
                            el.src = binding.value
                            //当图片进入视口区域后 停止监听该元素是否进入视口区域  优化内存
                            stop()
                        }
                    },
                )

            }
        })

    }
}